<template>
  <view class="login-form">
    <view class="form-item">
      <view class="form-label">
        手机号
      </view>
      <view class="form-body">
        <image :src="$static('images/icon/username.png')" class="icon" />
        <input
          v-model="form.username"
          placeholder="请输入账号"
          placeholder-class="wk-placeholder placehoder"
          maxlength="11"
          class="input-core"
          @input="handleChange">
      </view>
    </view>
    <view class="form-item">
      <view class="form-label">
        密码
      </view>
      <view class="form-body">
        <image :src="$static('images/icon/password.png')" class="icon" />
        <input
          v-model="form.password"
          password
          placeholder="请输入密码"
          placeholder-class="wk-placeholder placehoder"
          maxlength="20"
          class="input-core"
          @input="handleChange">
		<!-- <image :src="$static('images/icon/password.png')" class="icon" /> -->
      </view>
    </view>
   
    <view class="form-item">
      <view class="form-label">
        验证码
      </view>
      <view class="form-body">
        <image :src="$static('images/icon/password.png')" class="icon" />
        <input
          v-model="form.code"
          placeholder="请输入验证码"
          placeholder-class="wk-placeholder placehoder"
          maxlength="20"
          class="input-core"
          @input="handleChange">
        <image :src="codeUrl" mode="aspectFit" class="code" @click="getCodeImgs" />
      </view>
    </view>
    <view
      class="login"
      @click="submitForm">
      登&nbsp;&nbsp;录
    </view>
  </view>
</template>

<script>
  import {providerLogin, renderWechatAPI, getCodeImg} from 'API/login'
  import { deepCopy } from '@/utils/lib.js'

  export default {
    name: 'LoginForm',
    props: {
      value: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        form: {
          username: '',
          password: '',
          imgUuid: undefined, // redis的key
          code: '',
        },
        codeUrl: ''// 验证码图片，请求发送后把map集合的img解析到这里
      }
    },
    watch: {
      value: {
        handler() {
          this.form = this.value || {username: '', password: ''}
        },
        immediate: true,
        deep: true
      }
    },
    mounted() {
      console.log('页面加载')
      this.getCodeImgs()// 获取验证码
    },	
    methods: {
      handleChange() {
        this.$emit('input', this.form)
      },
      // 获取验证码
      getCodeImgs() {
        getCodeImg().then(res => {
          this.form.imgUuid = res.data.uuid// 获取验证码传递的uuid
          this.codeUrl = `data:image/png;base64,${res.data.img}`;// 把验证码字符串转化为图片吗
        })
      },
      submitForm() {
        // 给密码加密
        // this.password = processPassword(this.username, this.password); 
        // 发出一个自定义事件，并传递表单数据
        this.$emit('formSubmit', deepCopy(this.form),this.getCodeImgs());
      }
    }
  }
</script>

<style scoped lang="scss">
	@import '../style/formItem.scss';
	
	.login-form {
		width: 100%;
		margin-top: 50rpx;
	}
	.code{
		width: 200rpx;
		height: 60rpx;
	}
	.login{
		margin-top: 70rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		width: 680rpx;
		color: #000000;
		background-color:#29BECE;
		border-radius: 40rpx;
	}
</style>
